<template>
    <div class="flow-leave-dialog-container">
        <el-dialog :title="state.dialog.title" v-model="state.dialog.isShowDialog" width="769px">
            <el-form ref="leaveDialogFormRef" :model="state.ruleForm" :rules="state.rules" size="default" label-width="90px">
                <el-row :gutter="35">
                    <!-- <el-col :span="12" class="mb20">
                        <el-form-item label="请假类型" prop="type">
                            <el-input v-model="state.ruleForm.type" placeholder="请输入请假类型" clearable></el-input>
                        </el-form-item>
                    </el-col> -->
                    <el-col :span="24" class="mb20">
                        <el-form-item label="请假原因" prop="reason">
                            <el-input type="textarea" v-model="state.ruleForm.reason" :disabled="state.disabled" placeholder="请输入请假原因" clearable></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24" class="mb20">
                        <el-form-item label="请假时间" prop="dateRange">
                            <el-date-picker
                                :disabled="state.disabled"
                                v-model="state.ruleForm.dateRange"
                                @change="calculateLeaveDays"
                                type="daterange"
                                range-separator="到"
                                start-placeholder="开始日期"
                                end-placeholder="结束日期"
                                size="default"
                            />
                            <!-- <el-input v-model="state.ruleForm.startTime" placeholder="请输入开始时间" clearable></el-input> -->
                        </el-form-item>
                    </el-col>
                    <el-col :span="12" class="mb20">
                        <el-form-item label="请假天数" prop="day">
                            <el-input v-model="state.ruleForm.day" :disabled="state.disabled" placeholder="请输入请假天数" clearable></el-input>
                        </el-form-item>
                    </el-col>
                    <!-- <el-col :span="12" class="mb20">
                        <el-form-item label="结束时间" prop="endTime">
                            <el-input v-model="state.ruleForm.endTime" placeholder="请输入结束时间" clearable></el-input>
                        </el-form-item>
                    </el-col> -->
                    <!-- 
                    <el-col :span="12" class="mb20">
                        <el-form-item label="流程实例的id" prop="instanceId">
                            <el-input v-model="state.ruleForm.instanceId" placeholder="请输入流程实例的id" clearable></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12" class="mb20">
                        <el-form-item label="节点编码" prop="nodeCode">
                            <el-input v-model="state.ruleForm.nodeCode" placeholder="请输入节点编码" clearable></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12" class="mb20">
                        <el-form-item label="流程节点名称" prop="nodeName">
                            <el-input v-model="state.ruleForm.nodeName" placeholder="请输入流程节点名称" clearable></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12" class="mb20">
                        <el-form-item label="节点类型" prop="nodeType">
                            <el-select v-model="state.ruleForm.nodeType" placeholder="请选择节点类型" clearable>
                                <el-option
                                        v-for="dict in nodetypeDict"
                                        :key="dict.value"
                                        :label="dict.label"
                                        :value="dict.value"
                                />
                            </el-select>
                        </el-form-item>
                    </el-col>
                     -->
                    <!-- <el-col :span="12" class="mb20">
                        <el-form-item label="自定义流程状态">
                            <el-input v-model="state.ruleForm.newFlowStatus" placeholder="请输入自定义流程状态" clearable></el-input>
                        </el-form-item>
                    </el-col> -->
                    <el-col :span="12" class="mb20">
                        <el-form-item label="抄送人" prop="additionalHandler">
                            <el-select v-model="state.ruleForm.additionalHandler" multiple :disabled="state.disabled" placeholder="请选择抄送人" clearable>
                                <el-option
                                        v-for="dict in userData"
                                        :key="dict.value"
                                        :label="dict.label"
                                        :value="dict.value"
                                />
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <template #footer>
				<span class="dialog-footer">
					<el-button @click="onCancel" size="default">取 消</el-button>
					<el-button type="primary" v-if="!state.disabled" @click="onSubmit" size="default">{{ state.dialog.submitTxt }}</el-button>
                    <el-button type="primary" v-if="state.disabled" @click="handleSubmit" size="default">提交审批</el-button>
				</span>
            </template>
        </el-dialog>
    </div>
</template>

<script setup lang="ts" name="flowLeaveDialog">
    import constConfig from '/@/utils/constConfig';
    import { leaveApi } from '/@/api/biz/flow/leave';

    // 定义子组件向父组件传值/事件
    const emit = defineEmits(['refresh']);
    const { proxy } = <any>getCurrentInstance();

    const props = defineProps({
        nodetypeDict: {
            type: Array<any>,
            default: () => [],
        },
        flowstatusDict: {
            type: Array<any>,
            default: () => [],
        },
        userData:{
            type: Array<any>,
            default: () => [],
        },
    });

    // 定义变量内容
    const leaveDialogFormRef = ref();
    const state = reactive({
        ruleForm: {} as LeaveType,
        dialog: {
            isShowDialog: false,
            type: '',
            title: '',
            submitTxt: '',
        },
        rules: {
            id:{ required: true, message: "主键不能为空", trigger: "blur" },
            type:{ required: true, message: "请假类型不能为空", trigger: "blur" },
            reason:{ required: true, message: "请假原因不能为空", trigger: "blur" },
            startTime:{ required: true, message: "开始时间不能为空", trigger: "blur" },
            endTime:{ required: true, message: "结束时间不能为空", trigger: "blur" },
            dateRange:{ required: true, message: "请假时间不能为空", trigger: "blur" },
            day:{ required: true, message: "请假天数不能为空", trigger: "blur" },
            instanceId:{ required: true, message: "流程实例的id不能为空", trigger: "blur" },
            nodeCode:{ required: true, message: "节点编码不能为空", trigger: "blur" },
            nodeName:{ required: true, message: "流程节点名称不能为空", trigger: "blur" },
            nodeType:{ required: true, message: "节点类型（0开始节点 1中间节点 2结束节点 3互斥网关 4并行网关）不能为空", trigger: "blur" },
            flowStatus:{ required: true, message: "流程状态（0待提交 1审批中 2 审批通过 3自动通过 4终止 5作废 6撤销 7取回  8已完成 9已退回 10失效）不能为空", trigger: "blur" },
            delFlag:{ required: true, message: "删除标志（0代表存在 2代表删除）不能为空", trigger: "blur" },
        },
        disabled: false
    });

    // 打开弹窗
    const openDialog = (type: string, row: any) => {
        // if (id) {
        //     leaveApi().get(id).then((res: any) => {
        //         state.ruleForm = res.data;
        //     });
        // }
        state.dialog.type = type;
        state.dialog.isShowDialog = true;
        state.ruleForm = row;
        state.disabled = false;
        if (type === constConfig.dialogType.add) {
            state.dialog.title = '新增OA请假申请';
            state.dialog.submitTxt = '新 增';
        } else if (type === constConfig.dialogType.edit) {
            state.dialog.title = '修改OA请假申请';
            state.dialog.submitTxt = '修 改';
        } else {
            state.dialog.title = 'OA请假申请审批';
            state.disabled = true;
        }
        nextTick(() => {
            leaveDialogFormRef.value.clearValidate();
        });
    };
    // 关闭弹窗
    const closeDialog = () => {
        state.dialog.isShowDialog = false;
    };
    // 取消
    const onCancel = () => {
        closeDialog();
    };
    // 提交
    const onSubmit = () => {
        leaveDialogFormRef.value.validate((valid: boolean) => {
            if (valid) {
                if (state.dialog.type === constConfig.dialogType.add) {
                    leaveApi().save(state.ruleForm).then(() =>{
                        closeDialog();
                        emit('refresh');
                    })
                } else {
                    leaveApi().update(state.ruleForm).then(()=>{
                        closeDialog();
                        emit('refresh');
                    })
                }
            }
        })
    };
    const handleSubmit = () =>{
      leaveApi().submit({id: state.ruleForm.id, flowStatus: state.ruleForm.flowStatus}).then(response => {
        proxy.modal.msgSuccess("提交审批成功");
        closeDialog();
        emit('refresh');
      })
    }
    const calculateLeaveDays = (evt:any) => {
        if (evt) {
            state.ruleForm.startTime = evt[0];
            state.ruleForm.endTime = evt[1];
            const diffTime = Math.abs(state.ruleForm.endTime - state.ruleForm.startTime);
            const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24)) + 1; // 包含开始和结束的当天
            state.ruleForm.day = diffDays;
        } else {
            state.ruleForm.startTime = null;
            state.ruleForm.endTime = null;
        }
        
    }

    // 暴露变量
    defineExpose({
        openDialog,
    });
</script>
